<template>
  <div v-if="indexShow">
    <el-row
      style="margin: 10px 10px 20px 10px; text-size-adjust: 10px; padding: 10px"
    >
      <el-col :span="2">
        <el-button type="success" @click="openConfig(null)">新建</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="success" @click="deleteList(null)">批量删除</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      :stripe="true"
      :border="true"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        align="center"
        :label="dataTable.title"
        v-for="dataTable in dataTableFrom"
        :min-width="dataTable.width"
        :prop="dataTable.dataIndex"
      >
        <template #default="scope" v-if="dataTable.type === 'date'">
          <span v-if="dataTable.dataIndex === 'createTime'">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </span>
          <span v-if="dataTable.dataIndex === 'updateTime'">
            {{ scope.row.updateTime }}
          </span>
        </template>
        <template #default="scope" v-if="dataTable.dataIndex === 'tablePrefix'">
          <span>{{ tablePrefixFilter(scope.row.tablePrefix) }}</span>
        </template>
        <template #default="scope" v-if="dataTable.dataIndex === 'action'">
          <el-button size="small" type="info" @click="scope.row.id">
            预揽
          </el-button>
          <el-button size="small" type="primary"> 生成 </el-button>
          <el-button size="small" type="warning" @click="openConfig(scope.row)">
            配置
          </el-button>
          <el-button size="small" type="danger"> 删除 </el-button>
        </template>
      </el-table-column>
      <!-- <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    </el-table>
  </div>
  <Gen v-else ref="stepsRef" @closed="closeConfig"></Gen>
</template>

<script lang="ts" setup>
import genBasic from "@/api/gen/genBasic";
import { ref, onMounted, reactive, watch, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Gen from "./Gen.vue";
const indexShow = ref(true);
const stepsRef = ref();
const dataTableFrom = [
  {
    title: "业务名",
    dataIndex: "busName",
    ellipsis: true,
  },
  {
    title: "功能名",
    dataIndex: "functionName",
    ellipsis: true,
  },
  {
    title: "类名",
    dataIndex: "className",
    ellipsis: true,
    width: "220px",
  },
  {
    title: "包名",
    dataIndex: "packageName",
    ellipsis: true,
  },
  {
    title: "作者",
    dataIndex: "authorName",
    ellipsis: true,
  },
  {
    title: "移除表前缀",
    dataIndex: "tablePrefix",
    ellipsis: true,
  },
  {
    title: "生成方式",
    dataIndex: "generateType",
    ellipsis: true,
  },
  {
    title: "生成时间",
    dataIndex: "createTime",
    ellipsis: true,
    width: "220px",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: "220px",
  },
];
const tableData = ref([]);
const loading = ref(true);
const tablePrefixFilter = (text) => {
  const array = [
    {
      label: "移除",
      value: "Y",
    },
    {
      label: "不移除",
      value: "N",
    },
  ];
  return array.find((f) => f.value === text).label;
};
onMounted(() => {
  loading.value = false;
  page();
});
const page = () => {
  genBasic.page({ size: 10, current: 1 }).then((item) => {
    tableData.value = item.data.records;
  });
};
const deleteList = (ids: Array<number>) => {
  ElMessageBox.confirm("确定要删除吗?", "批量删除", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    genBasic.batchDelete(ids).then((item) => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    });
  });
};
// 打开配置界面
const openConfig = (record) => {
  indexShow.value = false;
  nextTick(() => {
    stepsRef.value.configSteps(record);
  });
};
const closeConfig = (record) => {
  indexShow.value = true;
  page();
};
</script>

<style></style>
